<template>

  <doc-alert title="WPS 开放平台" url="https://open.wps.cn/previous/docs/client/wpsLoad" />
  <doc-alert title="金山办公产品帮助中心" url="https://p.wpseco.cn/wiki/doc/632a75e2d7c60f8bf1fd82f3" />


  <ContentWrap>

    <el-space wrap alignment="flex-start">
      <el-card  class="box-card" style="width: 250px">
        <template #header>
          <div class="card-header">
            新建空白表格
          </div>
        </template>
        <div  class="text item">
          <el-form-item >
            <el-button type="primary" plain @click="newEt()">
              <Icon icon="ep:plus" class="mr-5px" /> 新建表格
            </el-button>
          </el-form-item>
        </div>
      </el-card>

      <el-card  class="box-card" style="width: 300px">
        <template #header>
          <div class="card-header">
            打开服务器文件
          </div>
        </template>
        <div  class="text item">
          <el-form-item label="文件ID：">
            <el-input style="width:200px;" type="text" v-model="openDocFileId"/>
          </el-form-item>
          <el-form-item label="保护模式：">
            <el-checkbox v-model="protectWorkbook" >保护工作簿</el-checkbox>
          </el-form-item>
          <el-form-item label="保护密码：">
            <el-input style="width:200px;" type="text"  v-model="protectPwd"/>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" plain @click="openEt()">
              <Icon icon="ep:plus" class="mr-5px" /> 打开server端文件
            </el-button>
          </el-form-item>
        </div>
      </el-card>

      <el-card  class="box-card" style="width: 350px">
        <template #header>
          <div class="card-header">
            在线打开
          </div>
        </template>
        <div  class="text item">
          <el-form-item label="文件ID：">
            <el-input  style="width:200px;" type="text" v-model="onlineEditDocFileId"/>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" plain @click="OnlineEditEt()">
              <Icon icon="ep:plus" class="mr-5px" /> 在线编辑server端文件（文档不落地）
            </el-button>
          </el-form-item>
        </div>
      </el-card>

    </el-space>

  </ContentWrap>

</template>

<script lang="ts" setup>

import {generateUUID} from "@/utils";

defineOptions({name: 'OfficeWps'})

import {_EtInvoke,cancelRegWebNotify} from '@/views/office/et/js/et.js'
import * as FileApi from '@/api/infra/file'
import {constEtEnum} from "@/components/WpsOffice/et/enum";

const route = useRoute() // 路由信息

const openDocFileId = ref(1504);
const onlineEditDocFileId = ref(1504);
// 保护工作簿
const protectWorkbook = ref(false);
const protectPwd = ref("996code");


// 记录当前页面打开的wps
let activeEt = {};
let routeName = route.name + generateUUID();

onUnmounted(()=>{
  console.log('onUnmounted...')
  Object.keys(activeEt).forEach(function(key) {
    cancelRegWebNotify(activeEt[key]);
  });
})

const handleWpsMessage = function (clientType, name,route,activeEtId, data) {
   console.log(clientType, name,route,activeEtId, data,'ET-handleWpsMessage...clientType, clientType, name,activeEtId, data')
  if(data.msgType == "etClose"){
    delete activeEt[data[constEtEnum.ActiveEtId]] ;
    cancelRegWebNotify(data[constEtEnum.ActiveEtId]);
  }
}

const newEt = function (callbackFunc) {
  console.log('newEt')
  let activeEtId = "wps-newEt-"+generateUUID();
  _EtInvoke([{
        "NewEt": {
          [constEtEnum.ActiveEtId]:activeEtId,
        }
      }],
      true,
      false,
      routeName,
      activeEtId,
      handleWpsMessage
  ) // NewDoc方法对应于OA助手dispatcher支持的方法名
  activeEt[activeEtId] = callbackFunc;
}

// 服务器文件地址
// https://code.996code.top:88/yudao-server/admin-api/infra/file/4/get/ba0af12f52535c646d66a1754796400db060f9f7cfa42f5e2d71ccc1ec298dc1.docx
const openEt = async function (callbackFunc) {
  let fileInfo = await FileApi.getFileById(openDocFileId.value);
  console.log('文件信息',fileInfo);
  const  filePathUrl = fileInfo.url;
  const  fileName = fileInfo.name ;
  console.log('openEt',filePathUrl)
  let activeEtId = "wps-openEt-"+generateUUID();
  let openEt =  {
    "filePathUrl": filePathUrl,
    "fileName": fileName,
    [constEtEnum.ActiveEtId]:activeEtId,
  };
  openEt["openType"] =  { //文档打开方式
    "protectWorkbook": protectWorkbook.value,
    "password": protectPwd.value
  }
  _EtInvoke([{
        "OpenEt":openEt
      }],
      true,
      false,
      routeName,
      activeEtId,
      handleWpsMessage
  ) // NewDoc方法对应于OA助手dispatcher支持的方法名
  activeEt[activeEtId] = callbackFunc;
}
const OnlineEditEt = async function (callbackFunc) {
  let fileInfo = await FileApi.getFileById(onlineEditDocFileId.value);
  console.log('文件信息',fileInfo);
  let activeEtId = "wps-OnlineEditEt-"+generateUUID();
  const  filePathUrl = fileInfo.url;
  const  fileName = fileInfo.name ;
  console.log('OnlineEditEt',filePathUrl)
  let onlineEditDoc =  {
    "filePathUrl": filePathUrl,
    "fileName": fileName,
    [constEtEnum.ActiveEtId]:activeEtId,
  };

  _EtInvoke([{
        "OnlineEditEt": onlineEditDoc
      }],
      true,
      false,
      routeName,
      activeEtId,
      handleWpsMessage
  ) // NewDoc方法对应于OA助手dispatcher支持的方法名
  activeEt[activeEtId] = callbackFunc;
}


</script>
